<template>
    <div class="widget" id="tags" v-if="tagList.length>0">

        <h3>快速查找</h3>
        <div class="taglist">
            <a v-for="(item,index) in tagList" :key="index"  @click="jump()" class='tag-link-56 bounce-in-left' :style="{animationDelay:index*0.1+'s'}" title='item.tag'
               style='font-size: 0.75em;'>{{item.tag}} ({{item.total}})</a>

        </div>

    </div>
</template>

<script>
    export default {
        name: "tag",
        data(){
          return{
              tagList:[]

          }

        },
        created(){
          this.getlist();
        },
        methods:{
            getlist(){
              this.$http({
                  url:'tagList'
              }).then(res=>{
                  this.tagList=res.code===200?res.data:[];
              })
            },
            jump(){

            }

        }


    }
</script>

<style scoped>

    .bounce-in-left {
        -webkit-animation: bounce-in-left 1.1s both;
        animation: bounce-in-left 1.1s both;
    }

    @-webkit-keyframes bounce-in-left {
        0% {
            -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
        }
        38% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }
        55% {
            -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        72% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        81% {
            -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        90% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        95% {
            -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }
    @keyframes bounce-in-left {
        0% {
            -webkit-transform: translateX(-600px);
            transform: translateX(-600px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
            opacity: 0;
        }
        38% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
            opacity: 1;
        }
        55% {
            -webkit-transform: translateX(-68px);
            transform: translateX(-68px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        72% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        81% {
            -webkit-transform: translateX(-28px);
            transform: translateX(-28px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        90% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
        95% {
            -webkit-transform: translateX(-8px);
            transform: translateX(-8px);
            -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
        }
        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
        }
    }


</style>
